<template>
	<view class="hui">
		<u-navbar leftIconColor="black" :autoBack="true" title="订单列表" titleStyle="color:black" :placeholder="true"
			bgColor="#fff">
		</u-navbar>
		<view class="tab_box b_flex_c_s">
			<u-tabs :current="current" :list="tab" @click="click" lineColor="#3C7CFF" lineWidth="40"
				:activeStyle="{color:'#3C7CFF',fontWeight:'bold'}" :inactiveStyle="{color: '#9296AF'}"
				itemStyle='height:80rpx;width:200rpx;'></u-tabs>
		</view>
		<view class="list_box">
			<view class="info_box" v-for="(item,index) in list" :key="index">
				<view @click="$project.toPath('/pages/bed/info?id='+item.id)">
					<view class="time b_flex_c_s_w">
						<view>{{$project.setTime(item.createTime)}}</view>
						<view>{{item.deviceNumber}}</view>
					</view>
					<view class="b_flex_c_s m_t">
						<view class="name">{{item.title}}</view>
						<view :class="[item.complete?'blue':'blue','state']">{{$project.setState(item.complete)}}</view>
					</view>
					<view class="b_flex_c m_t time_box">
						<image src="@/static/img/bed/time.png" class="img" mode="widthFix"></image>
						<view>下单时间:&nbsp;{{$project.setTime(item.createTime,2)}}</view>
					</view>
					<view class="b_flex_c m_t time_box">
						<view class="b_flex_c">
							<image src="@/static/img/bed/ztime.png" class="img" mode="widthFix"></image>

							<view>租用时长:&nbsp;{{item.leaseTimes}}</view>
						</view>
						<view v-if="item.paid&&item.price" class="money">￥{{item.price}}</view>

					</view>
				</view>
				<view class="b_flex_c_s_w button_box" v-if="!item.complete">
					<view class="buttons" @click="submit(item,2)">应急开锁</view>
					<view class="buttons" @click="submit(item,1)">关锁还床</view>
				</view>
			</view>
		</view>
		<empty v-if="emptyShow" text="暂无订单"></empty>
	</view>
</template>

<script>
	import {
		deviceOrder
	} from "@/require/api.js";
	import empty from "@/components/empty.vue";
	export default {
		components: {
			empty
		},
		data() {
			return {
				params: {
					page: 1,
					limit: 10,
					status: '',
					materials: 'accompanyingBed'
				},
				current: 0,
				total: '',
				tab: [{
						name: '全部',
						val: ''
					},
					{
						name: '使用中',
						val: 0
					},
					{
						name: '已完成',
						val: 1
					}
				],
				list: [],
				emptyShow: true
			}
		},
		computed: {
			upList() {
				return this.$store.state.newList;
			}
		},
		watch: {
			upList(e) {
				this.$blue.openBluetoothAdapter();
				this.getList();
			}
		},
		onLoad(data) {
			if (data.status) {
				this.params.status = data.status;
				if (data.status == 1) this.current = 2;
				if (data.status == 0) this.current = 1;
			}
		},
		onShow() {
			this.$project.getNetwork();
			this.$blue.openBluetoothAdapter();
			if (this.params.page > 1) {
				this.params.limit = this.params.page * this.params.limit;
				this.params.page = 1;
			}
			this.getList();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				deviceOrder(this.params).then(res => {
					res.data.list.forEach((res) => {
						this.list.push(res);
					});
				});
			}
		},
		methods: {
			async click(e) {
				this.params.page = 1;
				this.params.status = e.val;
				await this.getList();
			},
			async getList() {
				let {
					data
				} = await deviceOrder(this.params);
				if (data.list.length < 1 || !data.list) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data.list;
				this.total = data.total;
			},
			submit(item,type) {
				let _ = this;
			     uni.authorize({
			     	scope:"scope.userLocation",
			     	success:function(res){
			     		_.$blue.openBluetoothAdapter();
			     		console.log(res);
						if(type==1){
							_.close(item);
						}else{
							_.toBlue(item);
						}
			     		
			     	},
			     	fail:function(error){
			     		console.log(error);
			     		errorAdd({msg: JSON.stringify(error)});
			     		_.$project.isLocation();
			     	}
			     })
			},
			close(item) {
				let _ = this;
				let blue = this.$blue;
				uni.showModal({
					title: '确认是否关锁还床?',
					success(res) {
						if (res.confirm) {

							let mac = item.mac;


							let deviceId = '';
							console.log(_.$store.state.macList);
							if (!_.$store.state.macList[mac]) {

								return _.$project.toast('打开蓝牙和定位，请稍后再试');
							} else {
								deviceId = _.$store.state.macList[mac];
							}

							/* if (!_.$project.inObjectArray({
									deviceId: mac
								}, _.$store.state.devices, 'deviceId')) {
								return _.$project.toast('设备未找到,请稍后重试');
							} */

							_.$store.commit('setType', 2);
							uni.showLoading({
								title: '关锁中,请勿远离设备...'
							})
							blue.createBLEConnection(deviceId);
						}
					}
				})
			},
			toBlue(item) {
				let _ = this;
				uni.showModal({
					title: '确认是否应急开锁?',
					success: (res) => {
						if (res.confirm) {
							let mac = item.mac;
							let deviceId = '';
							if (!_.$store.state.macList[mac]) {
								return _.$project.toast('打开蓝牙和定位，请稍后再试');
							} else {
								deviceId = _.$store.state.macList[mac];
							}
							_.$store.commit('setType', 3);
							uni.showLoading({
								title: '开锁中,请勿远离设备...'
							})
							_.$blue.createBLEConnection(deviceId);
						}
					}
				});


			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_box {
		background-color: #fff;
		box-sizing: border-box;
		padding: 10rpx 0;
	}

	.list_box {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_box {
		background-color: #fff;
		width: 100%;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.m_t {
		margin-top: 30rpx;
	}

	.time {
		color: #252B50;
		border-bottom: 1rpx solid #F5F5F5;
		box-sizing: border-box;
		padding: 0 0 30rpx 0;
	}

	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #252B50;
		flex: 1;
	}

	.blue {
		color: #3C7CFF;
	}

	.grey {
		color: #9296AF;
	}

	.img {
		width: 25rpx;
		margin-right: 10rpx;
	}

	.time_box {
		color: #9296AF;
		font-size: 27rpx;
		width: 100%;
	}

	.money {
		font-size: 30rpx;
		margin-left: auto;
	}

	.state {

		margin-left: 20rpx;
	}

	.button_box {
		margin-top: 20rpx;
	}

	.buttons {
		width: 49%;
		background-color: #3C7CFF;
		color: #fff;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 30rpx;
	}
</style>